'use client';

import { ThemeProvider } from '@emotion/react';
import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { getWorkspaceDefaultClipBrowserFilters } from '@/components/clipBrowser/defaultClipBrowserFilters';
import { ClipBrowserFilters } from '@/components/clipBrowser/types';
import { ClipBrowserContextProvider } from '@/components/clipBrowser/useClipBrowser';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useContextSelector } from '@/hooks/useContextSelector';

import { standardTheme } from '../../create/createV2/componentsQ3/themes';
import CreateFormContext from '../../create/v2/CreateFormContext';
import CreateFormContextProvider from '../../create/v2/CreateFormContextProvider';
import { useCurrentWorkspace } from '../../create/v2/useCurrentWorkspace';
import { ActiveUser, ChatClient } from '../ChatClient';
import { ChatTopBar } from '../ChatTopBar';
import { OrpheusAblyProvider } from '../OrpheusAblyProvider';
import { useOrpheusExperimentGroup } from '../hooks/useOrpheusExperimentGroup';
import { ChatSession } from '../types';
import { OrpheusChatProvider, useChat } from '../useChat';
import { getModalBaseUrl } from '../utils';

const ChatClientWrapper = styled.div`
  position: absolute;
  top: 64px;
  bottom: 0;
  width: 100%;
`;

export const ChatPageClient = observer(
  ({ sessionId }: { sessionId?: string }) => {
    const [sessionData, setSessionData] = useState<ChatSession | null>(null);
    const model = useContextSelector(
      CreateFormContext,
      (context) => context.state.global.model
    );
    const { session } = useStores();
    const [activeUsers, setActiveUsers] = useState<ActiveUser[]>([]);
    const orpheusChatState = useChat(true);
    const userId = session.user?.id;
    const workspaceId = useCurrentWorkspace();
    const creditsRemaining = useContextSelector(
      CreateFormContext,
      (context) => context.creditsRemaining
    );
    const {
      isControlGroup: isChatExpControlGroup,
      isLoading: isChatExpLoading,
    } = useOrpheusExperimentGroup();
    const isChatExpEnabled = !isChatExpControlGroup;

    const getDefaultFilters = useCallback(
      () =>
        userId && workspaceId
          ? getWorkspaceDefaultClipBrowserFilters(userId, workspaceId)
          : null,
      [userId, workspaceId]
    );

    useEffect(() => {
      const fetchSession = async () => {
        const modalBaseUrl = getModalBaseUrl();
        const response = await fetch(`${modalBaseUrl}/session/${sessionId}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const _sessionData = await response.json();
        setSessionData(_sessionData);
        orpheusChatState.fetchChatHistory(
          sessionId ?? '',
          sessionData?.workspace_id ?? ''
        );
      };
      if (sessionId) {
        fetchSession();
      }
    }, [sessionId]);

    useEffect(() => {
      if (!isChatExpEnabled && !isChatExpLoading) {
        window.location.href = '/create';
      }
    }, [isChatExpEnabled, isChatExpLoading]);

    return (!!sessionId && !sessionData) || !session.flags ? (
      <div className='flex h-full w-full items-center justify-center'>
        <SpinnerSVG />
      </div>
    ) : (
      <ThemeProvider theme={standardTheme}>
        <ClipBrowserContextProvider
          // should return correct type if userId and workspaceId are set.
          getDefaultFilters={getDefaultFilters as () => ClipBrowserFilters}
        >
          <OrpheusAblyProvider>
            <OrpheusChatProvider value={orpheusChatState}>
              <CreateFormContextProvider>
                <ChatTopBar
                  activeUsers={activeUsers}
                  creditsRemaining={creditsRemaining}
                  sessionMetadata={sessionData ?? undefined}
                />
                <ChatClientWrapper>
                  <ChatClient
                    model={model}
                    sessionId={sessionId}
                    sessionMetadata={sessionData ?? undefined}
                    className='transition-[padding] duration-300 ease-in-out'
                    setActiveUsers={setActiveUsers}
                    readOnly={true}
                  />
                </ChatClientWrapper>
              </CreateFormContextProvider>
            </OrpheusChatProvider>
          </OrpheusAblyProvider>
        </ClipBrowserContextProvider>
      </ThemeProvider>
    );
  }
);